<template>
  <a-drawer
    width="1000px"
    placement="right"
    :title="title"
    :visible="visible"
    :bodyStyle="{ padding: '1px' }"
    @close="cancel"
  >
    <div class="eip-drawer-body beauty-scroll">
      <a-spin :spinning="spinning">
        <a-form-model
          ref="form"
          :model="form"
          :rules="rules"
          :label-col="config.labelCol"
          :wrapper-col="config.wrapperCol"
        >
          <a-row>
            <a-col>
              <a-form-model-item label="名称" prop="title">
                <a-input v-model="form.title" placeholder="请输入名称" />
              </a-form-model-item>
              <a-form-model-item label="表单" prop="formId">
                <a-select
                  placeholder="请选择表单"
                  allow-clear
                  v-model="form.formId"
                >
                  <a-select-option
                    v-for="(item, i) in forms"
                    :key="i"
                    :value="item.configId"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="表达式" prop="judge">
                <div class="padding-bottom-sm">
                  <a-alert
                    message="请填写条件表达式,支持sql语句判断如>,>=,<,<=,and,or等"
                    type="warning"
                    show-icon
                  />
                </div>
                <a-input
                  v-model="form.judge"
                  :rows="4"
                  type="textarea"
                  placeholder="请输入表达式"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-spin>
    </div>
    <div class="eip-drawer-toolbar">
      <a-space>
        <a-button key="back" @click="cancel" :disabled="loading"
          ><a-icon type="close" />取消</a-button
        >
        <a-button key="submit" @click="save" type="primary" :loading="loading"
          ><a-icon type="save" />提交</a-button
        >
      </a-space>
    </div>
  </a-drawer>
</template>

<script>
import { findForm } from "@/services/workflow/process/activity/begin";
export default {
  name: "edit",
  data() {
    return {
      modal: {
        bodyStyle: {
          padding: "1px",
        },
      },
      config: {
        labelCol: { span: 3 },
        wrapperCol: { span: 19 },
      },
      form: {
        title: null,
        judge: null,
        formId: undefined,
      },

      rules: {
        formId: [
          {
            required: true,
            message: "请选择表单",
            trigger: ["blur", "change"],
          },
        ],
        title: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],

        judge: [
          {
            required: true,
            message: "请输入表达式",
            trigger: "blur",
          },
        ],
      },
      forms: [],
      loading: false,
      spinning: false,
    };
  },

  mounted() {
    this.formInit();
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
    },
    title: {
      type: String,
    },
  },

  methods: {
    /**
     * 初始化表单
     */
    formInit() {
      let that = this;
      that.spinning = true;
      findForm({
        useType: 2,
      }).then(function (result) {
        if (result.code === that.eipResultCode.success) {
          that.forms = result.data;
        }
        that.find();
        that.spinning = false;
      });
    },

    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },

    /**
     * 保存
     */
    save() {
      let that = this;
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.cancel();
          that.form.judge = escape(that.form.judge);
          that.$emit("ok", that.form);
        } else {
          return false;
        }
      });
    },

    /**
     * 根据Id查找
     */
    find() {
      let that = this;
      if (that.data) {
        if (that.data.attrs.data.formId == "") {
          that.data.attrs.data.formId = undefined;
        }

        that.data.attrs.data.judge = unescape(that.data.attrs.data.judge);
        that.form = that.data.attrs.data;
      }
    },
  },
};
</script>

<style lang="less" scoped></style>
